import React, { Component, Fragment } from 'react';
import { Link } from 'dva/router';
import { connect } from 'dva';
import { Spin, Table, Card, Button,message, Switch, Form, Icon, Modal,Popover } from 'antd';
import styles from './notices.less';
import HeaderTab from '@/components/HeaderTab';
import router from 'umi/router';


class Notices extends Component {
  state = {
    loading: true,
    title:'',
    content:null,
    WxaTemplateId:'',
    tabs: [
      {
        title: '交易设置',
        key: `/${window.storeId}/order/settings`,
        // disabled: true
      },
      {
        title: '消息通知',
        key: `/${window.storeId}/order/setting/notices`,
      },      
    ],
  }

  componentDidMount() {
    window.Isoption = true;
  }
  componentWillMount() {
    window.Isoption = false;
    const { dispatch } = this.props;
    dispatch({
      type: `notice/GetOrderNotices`,
      callback: {
          success: (data) => {
              if (data.Code === 0) {
                this.setState({loading:false})
              }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }
  onChangeSms= (checked,id) => {
    this.setMsg(id,checked);
  }

  onChangeXcx= (checked,id) => {
    this.setXcx(id,checked);
  }

  setXcx= (MessageId,XcxPreview)=>{
    const { dispatch } = this.props;
    dispatch({
      type: `notice/SetXcxMessage`,
      payload: {
        MessageId: MessageId,
        XcxPreview:XcxPreview
      },
      callback: {
          success: (data) => {
            if (data.Code === 0) {
              message.success('设置成功');
            }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }

  setMsg= (MessageId,SmsPreview)=>{
    const { dispatch  } = this.props;
    dispatch({
      type: `notice/SetSmsMessage`,
      payload: {
        MessageId: MessageId,
        SmsPreview:SmsPreview
      },
      callback: {
          success: (data) => {
            if (data.Code === 0) {
              message.success('设置成功');
            }
          },
          error: (data) => {
            message.error(data.Msg);
          }
      }
    });
  }

  handleVisibleChange= (row,msg)=>{
    let title=row.Title,content=null;
    if(msg){
      let arr=row.SmsTemplateContent.split(/\\n/)
      content=(<div>{
        arr.map((item,i)=>{
          return <p key={i}>{item}</p>
        })
      }</div>)
    }else{
      let arr=row.WxaTemplateContent.split(/\\n/)
      content=(<div>{
        arr.map((item,i)=>{
          return <p key={i}>{item}</p>
        })
      }<p>{row.WxaTemplateId}</p></div>)
    }
    this.setState({title:title,content:content})
  }

  // 头部状态切换
  onTabChange = id => {
    this.setState(
      {
        activeId: id,
      },
      () => {
        router.replace({
          pathname: `${id}`,
        });
      }
    );
  };

  render() {
    const { loading, title,content,tabs } = this.state;
    const { loadingTable, orderNoticeList } = this.props;
    const columns=[{
      title: '消息标题',
      dataIndex: 'Title',
      key: 'Title',
      width:'20%'
    },{
      title: '推送规则',
      dataIndex: 'RuleInfo',
      key: 'RuleInfo',
    },{
      title: '小程序模板消息',
      key: 'notices',
      width:'15%',
      render: (text, row, index) => {
        return (<Form layout='inline'><Form.Item>
          <Switch size="small" defaultChecked={row.XcxPreview} onChange={(checked)=>{this.onChangeXcx(checked,row.Id)}} />
          <Popover
            content={content}
            title={title}
            trigger="click"
            onVisibleChange={()=>{this.handleVisibleChange(row)}}
          >
            <span style={{color:"#2E74FF",marginLeft:"8px",cursor:"pointer"}}>预览</span>
          </Popover>
        </Form.Item></Form>)
      },
    },{
      title: '短信通知',
      key: 'dx',
      width:'15%',
      render: (text, row, index) => {
        if(index===0 || index===2 || index===3 || index===8 || index===9 || index===11){
          return (<Form layout='inline'><Form.Item>
          <Switch size="small" defaultChecked={row.SmsPreview} onChange={(checked)=>{this.onChangeSms(checked,row.Id)}} />
          <Popover
            content={content}
            title={title}
            trigger="click"
            onVisibleChange={()=>{this.handleVisibleChange(row,"msg")}}
          >
            <span style={{color:"#2E74FF",marginLeft:"8px",cursor:"pointer"}}>预览</span>
          </Popover>
        </Form.Item></Form>)
        }
        return '-'
      }
    }];

    const dataSource=orderNoticeList.Data;

    return (
      <Fragment>
        {/* <HeaderTab
                    _this={this}
                    type="slider"
                    activeId={this.state.activeId}
                    onChange={this.onTabChange}
                    tabs={tabs}
                >

                </HeaderTab> */}
      
      <Spin spinning={loading}>
        <Card  bordered={false} className={styles.Notices}>
          <div className={styles.Tips}>
            <div className={styles.TipsLeft}><Icon style={{marginRight:"8px",color:"#FF9800"}} type="info-circle" theme="filled" />您店铺当前剩余短信条数为{orderNoticeList.RemainTotal}条啦，赶快去充值吧</div>
            <div className={styles.TipsRight}><a href="javascript:void(0)">立即充值</a></div>
          </div>
          <Table loading={loadingTable} columns={columns} dataSource={dataSource} pagination={false}/>
        </Card>
        {/* <Modal
          title={title}
          visible={this.state.visible}
          onOk={this.handleCancel}
          onCancel={this.handleCancel}
          footer={null}
          width={420}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal> */}
      </Spin>
      </Fragment>
    );
  }
}
export default connect(({ global, loading, notice}) => ({
  loadingTable: loading.effects['notice/GetOrderNotices'],
  orderNoticeList: notice.orderNoticeList
}))(Notices);
